<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文章标题 - 我的个人博客</title>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <header class="header">
      <div class="container">
        <h1 class="logo">我的博客</h1>
        <nav class="main-nav">
          <ul>
            <li><a href="index.html">首页</a></li>
            <li><a href="about.html">关于我</a></li>
            <li><a href="#contact">联系我</a></li>
          </ul>
        </nav>
      </div>
    </header>

    <div class="container article-container">
      <article class="article-content">
        <header>
          <h1>HTML5新特性探索</h1>
          <div class="article-meta">
            <span class="author">作者: 张三</span>
            <span class="date">发布时间: 2023年5月15日</span>
            <span class="category">分类: 前端开发</span>
          </div>
        </header>

        <img src="./img/html.png" alt="HTML5" class="featured-image" />

        <div class="article-body">
          <p>
            HTML5是HTML最新的修订版本，由万维网联盟（W3C）于2014年10月完成标准制定。HTML5的设计目的是为了在移动设备上支持多媒体。
          </p>

          <h2>语义化标签</h2>
          <p>
            HTML5引入了许多新的语义化元素，如&lt;header&gt;, &lt;footer&gt;,
            &lt;article&gt;,
            &lt;section&gt;等，这些标签让网页结构更加清晰，也便于搜索引擎理解网页内容。
          </p>

          <h2>多媒体支持</h2>
          <p>
            HTML5原生支持音频和视频播放，不再需要Flash等插件。使用&lt;audio&gt;和&lt;video&gt;标签可以轻松地在网页中嵌入多媒体内容。
          </p>

          <pre><code>&lt;video width="320" height="240" controls&gt;
    &lt;source src="movie.mp4" type="video/mp4"&gt;
    &lt;source src="movie.ogg" type="video/ogg"&gt;
    您的浏览器不支持HTML5视频标签。
&lt;/video&gt;</code></pre>

          <h2>Canvas绘图</h2>
          <p>
            HTML5的&lt;canvas&gt;元素提供了一套JavaScript
            API，允许开发者在网页上绘制图形、动画和游戏。Canvas非常适合创建数据可视化、广告横幅和游戏等。
          </p>

          <h2>本地存储</h2>
          <p>
            HTML5提供了localStorage和sessionStorage两种本地存储方式，可以在客户端存储数据，减少与服务器的通信，提高应用性能。
          </p>
        </div>

        <footer class="article-footer">
          <div class="tags">
            <span>标签: </span>
            <a href="#">HTML5</a>, <a href="#">前端开发</a>,
            <a href="#">Web技术</a>
          </div>
        </footer>
      </article>

      <section class="comments-section">
        <h2>评论</h2>

        <div id="comments-list">
          <div class="comment">
            <div class="comment-author">
              <img src="./img/avatar-02.jpg" alt="用户头像" />
              <span>李四</span>
            </div>
            <div class="comment-content">
              <p>这篇文章写得很好，对HTML5的新特性介绍得很全面！</p>
              <div class="comment-meta">2023年5月16日</div>
            </div>
          </div>

          <div class="comment">
            <div class="comment-author">
              <img src="./img/avatar-03.jpg" alt="用户头像" />
              <span>王五</span>
            </div>
            <div class="comment-content">
              <p>Canvas部分可以再详细一些，期待后续文章！</p>
              <div class="comment-meta">2023年5月17日</div>
            </div>
          </div>
        </div>

        <form id="comment-form" class="comment-form">
          <h3>发表评论</h3>
          <div class="form-group">
            <label for="name">姓名:</label>
            <input type="text" id="name" name="name" required />
          </div>
          <div class="form-group">
            <label for="email">邮箱:</label>
            <input type="email" id="email" name="email" required />
          </div>
          <div class="form-group">
            <label for="comment">评论:</label>
            <textarea id="comment" name="comment" rows="5" required></textarea>
          </div>
          <button type="submit" class="btn">提交评论</button>
        </form>
      </section>
    </div>

    <footer class="footer">
      <div class="container">
        <p>&copy; 2023 我的个人博客. 保留所有权利.</p>
        <div class="social-links">
          <a href="#"><i class="fab fa-github"></i></a>
          <a href="#"><i class="fab fa-twitter"></i></a>
          <a href="#"><i class="fab fa-linkedin"></i></a>
        </div>
      </div>
    </footer>

    <button id="back-to-top" title="回到顶部">↑</button>

    <script src="js/script.js"></script>
  </body>
</html>
